<template>
	<view class="bgf t-flex between item mb20">
		<view class="f30 c3">头像</view>
		<label for="avatar" class="avatar">
			<uv-image :src="$str.avatar(form.avatar)" mode="aspectFill"
			width="92rpx"
			height="92rpx"
			radius="50%"
			></uv-image>
			
			<image src="../../static/icons/16.png" mode="aspectFit" class="icon"></image>
			<button open-type="chooseAvatar" id="avatar" style="display: none;" @chooseavatar="chooseAvatar"></button>
		</label>
	</view>
	
	
	<view class="bgf t-flex between item ">
		<view class="f30 c3">昵称</view>
		<input type="nickname" placeholder="请输入昵称" class="input" v-model="form.nickname" />
	</view>
	<!-- <view class="bgf t-flex between item mb20" v-if="store.userinfo.is_sf == 1" @click="$go('/pages/workerClient/servers/servers')">
		<view class="f30 c3">服务区域</view>
		<text class="iconfont icon-xiangyou1"></text>
	</view> -->
	<view class="bgf t-flex between item mb20" @click="logout">
		<view class="f30 c3">退出登录</view>
		<text class="iconfont icon-tuichu-"></text>
	</view>
	<view class="Allbottom t-flex center safeArea">
		<view class="btn t-flex center cf f30" @click="confirm">确认</view>
	</view>
	
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { useStore } from '../../store';
import { showToast, upload } from '../../lib/ts/util';
import { editUserinfo } from '../../api';
	
	const store = useStore()
	
	let form = reactive({
		avatar:'',
		nickname:''
	})
	
	form.avatar = store.userinfo.avatar
	form.nickname = store.userinfo.nickname

	const chooseAvatar = (e)=>{
		upload(e.detail.avatarUrl).then(res=>{
			form.avatar = res.data.url
		})
	}
	
	const confirm = async ()=>{
		let res =  await editUserinfo(form)
		showToast(res.msg || '已保存')
		store.getUserinfo()
	}
	
	const logout = ()=>{
		uni.showModal({
			title:'提示',
			content:'确认退出当前账号？',
			success(e) {
				if(e.confirm){
					store.userinfo = null
					uni.removeStorageSync('token')
					uni.reLaunch({
						url:'/pages/public/login'
					})
				}
			}
		})
	}


</script>

<style scoped lang="scss">
	.item{
		padding: 40rpx 30rpx;
		.avatar{
			position: relative;
			.icon{
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}
		}
	}
	
	.input{
		width: 60%;
		text-align: right;
	}
	
	.tips{
		color:#FFA300 ;
		background-color: #FFF5E3;
		padding: 16rpx 52rpx;
		text-align: center;
	}

</style>
